<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        a {
            text-decoration: none;
            color: #666;
        }

        a:hover {
            text-decoration: underline;
            color: #b61d1d;
        }

        body,
        html {
            font: 12px/1.5 "微软雅黑", Arial;
            color: #666;
        }

        .wrap {
            width: 990px;
            margin: 0 auto;
        }

        .left {
            float: left;
        }

        .right {
            float: right;
        }

        .logo-box {
            height: 60px;
            padding-top: 10px;
        }

        .logo-r {
            font-size: 24px;
            padding-left: 20px;
            margin-top: 10px;
        }

        .content {
            background: #e93854;
            margin-top: 15px;
        }

        .login-box {
            height: 475px;
            background: url(image/banner.png) no-repeat left top;
        }

        .login-form {
            float: right;
            margin-top: 40px;
            width: 306px;
            padding: 20px;
            background: #fff;
        }

        .login-form h2 {
            font-weight: normal;
            font-size: 20px;
            height: 27px;
            margin-bottom: 25px;
        }

        .login-form h2 a {
            font-size: 14px;
            color: #b61d1d;
            padding-left: 21px;
            line-height: 29px;
            float: right;
            background: url(image/icon5.jpg) 0 center no-repeat;
        }

        .login-form .item {
            height: 38px;
            margin-bottom: 20px;
            border: 1px #bdbdbd solid;
        }

        .item input {
            float: left;
            border: 0 none;
            padding: 10px 0 10px 10px;
            font-size: 14px;
            line-height: 18px;
            width: 255px;
            color: #999;
        }

        .item label {
            border-right: 1px #bdbdbd solid;
            width: 38px;
            height: 38px;
        }

        .item .nick {
            background: url(image/icon1.jpg) no-repeat;
        }

        .item .psw {
            background: url(image/icon2.jpg) no-repeat;
        }

        .item2 {
            font-size: 0;
            margin-bottom: 15px;
        }

        .item2 label {
            font-size: 12px;
            vertical-align: middle;
        }

        .item2 input {
            vertical-align: middle;
            margin-right: 3px;
        }

        .item2 a {
            float: right;
            font-size: 12px;
        }

        .login-btn {
            display: block;
            height: 35px;
            line-height: 35px;
            text-align: center;
            color: #fff;
            background: #e4393c;
            font-size: 18px;
        }

        .login-btn:hover {
            color: #fff;
            text-decoration: none;
        }

        .footer {
            text-align: center;
            margin-top: 20px;
            padding-bottom: 30px;
        }

        .link a {
            margin: 0 10px;
        }

        .copy {
            margin-top: 8px;
        }
    </style>
</head>

<body>
    </head>

    <body>
        <header class="wrap">
            <div class="logo-box">
                <h1 class="left">
                    <a href=""><img src="image/logo.png" alt="LOGO" /></a>
                </h1>
                <span class="left logo-r">欢迎登录</span>
            </div>
        </header>

        <article class="content">
            <div class="wrap">
                <div class="login-box">
                    <div class="login-form">
                        <h2>京东会员<a href="">立即注册</a></h2>
                        <form action="" method="post" id="loginForm">
                            <div class="item">
                                <label class="nick left"></label>
                                <input type="text" name="nick" placeholder="邮箱/用户名/已验证手机" />
                            </div>
                            <div class="item">
                                <label class="psw left"></label>
                                <input type="password" name="psw" />
                            </div>
                            <div class="item2">
                                <input type="checkbox" name="auto" id="auto" />
                                <label for="auto">自动登录</label>
                                <a href="">忘记密码?</a>
                            </div>
                            <a href="" class="login-btn">登 录</a>
                        </form>
                    </div>
                </div>
            </div>
        </article>
        <footer class="wrap footer">
            <div class="link">
                <a href="">关于我们</a>|
                <a href="">联系我们</a>|
                <a href="">人才招聘</a>|
                <a href="">商家入驻</a>|
                <a href="">广告服务</a>|
                <a href="">手机京东</a>|
                <a href="">友情链接</a>|
                <a href="">销售联盟</a>|
                <a href="">京东社区</a>|
                <a href="">京东公益</a>|
                <a href="">English Site</a>
            </div>
            <div class="copy">Copyright©2004-2017 京东JD.com 版权所有</div>
        </footer>
    </body>

    </html>

</body>

</html>